<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>方剂</title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" charset="utf-8" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑';
    }
    .button-container {
      float: right;
    }
  </style>
  <script src="~/js/jquery-1.10.2.min.js"></script>
  <script src="~/js/generic.js"></script>
  <script src="~/js/fypage.js"></script>
</head>

<body>

<table class="maintable"style="width:100%">
  <tr>

    <td class="rightmaintd" valign="top">
      <div style="height:40px;text-align:center;background-color:#009966">
        <p style="font-weight:bold;padding-top:10px;font-size:larger;color:white">方剂库</p>
      </div>
      <div class="searchdiv">
        <input type="submit" id="btnAdd" value="+添加方剂" class="denglubtn" onclick="create()">
        <input type="button" value="+批量添加" class="denglubtn" onclick="BatchAdd();">
        <label>&nbsp;年级：&nbsp;</label>
        <select id="gradeSelect" onchange="changeGradeFun();">
          <option value="" id="gradeNone">请选择</option>
          <option th:each="Id : ${yonghuId}" th:value="${Id}" th:text="${Id}">Id</option>
        </select>
        <label>&nbsp;班级：&nbsp;</label>
        <select id="classSelect" onchange="changeClassFun();">
          <option value="" id="classNone">请选择</option>
          <option th:each="Cop : ${yonghuCompany}" th:value="${Cop}" th:text="${Cop}">Id</option>
        </select>
<!--        <span id="nianjispan" style="display: none">年级</span><select id="nianji" onchange="getList();" >-->
<!--        <option value="全部">全部</option>-->
<!--        <option value="2013级">2013级</option>-->
<!--        <option value="2014级">2014级</option>-->
<!--        <option value="2015级">2015级</option>-->
<!--        <option value="2016级">2016级</option>-->
<!--        <option value="2017级">2017级</option>-->
<!--        <option value="2018级">2018级</option>-->
<!--        <option value="2019级">2019级</option>-->
<!--        <option value="2020级">2020级</option>-->
<!--        <option value="2021级">2021级</option>-->
<!--        <option value="2022级">2022级</option>-->
<!--        <option value="2023级">2023级</option>-->
<!--        <option value="2024级">2024级</option>-->
<!--        <option value="2025级">2025级</option>-->
<!--        <option value="2026级">2026级</option>-->
<!--        <option value="2027级">2027级</option>-->
<!--        <option value="2028级">2028级</option>-->
<!--        <option value="2029级">2029级</option>-->
<!--        <option value="2030级">2030级</option>-->
<!--      </select> &nbsp; &nbsp;-->
<!--        <span id="companyspan" style="display:none">-->
<!--                        班级-->
<!--                    </span>-->
<!--        <select id="company" onchange="getList();" >-->
<!--          <option value="全部">全部</option>-->
<!--          <option value="中医学教改班">中医学教改班</option>-->
<!--          <option value="中医学(1)班">中医学(1)班</option>-->
<!--          <option value="中医学(2)班">中医学(2)班</option>-->
<!--          <option value="中医学(3)班">中医学(3)班</option>-->
<!--          <option value="中医学(4)班">中医学(4)班</option>-->
<!--          <option value="中医学（5+3）班">中医学（5+3）班</option>-->
<!--          <option value="中医学美康班">中医学美康班</option>-->
<!--          <option value="针灸推拿学(1)班">针灸推拿学(1)班</option>-->
<!--          <option value="针灸推拿学(2)班">针灸推拿学(2)班</option>-->
<!--          <option value="针灸推拿学(3)班">针灸推拿学(3)班</option>-->
<!--          <option value="针灸推拿学（5+3）班">针灸推拿学（5+3）班</option>-->
<!--          <option value="针灸推拿学教改">针灸推拿学教改</option>-->
<!--          <option value="针刀">针刀</option>-->
<!--          <option value="针灸推拿学(针刀)">针灸推拿学(针刀)</option>-->
<!--          <option value="骨伤(1)班">骨伤(1)班</option>-->
<!--          <option value="骨伤(2)班">骨伤(2)班</option>-->
<!--          <option value="骨伤(5+3)班">骨伤(5+3)班</option>-->
<!--          <option value="中西医临床(全科医学)(1)班">中西医临床(全科医学)(1)班</option>-->
<!--          <option value="中西医临床(全科医学)(2)班">中西医临床(全科医学)(2)班</option>-->
<!--          <option value="中西医临床(全科医学)(3)班">中西医临床(全科医学)(3)班</option>-->
<!--          <option value="中西医临床(全科医学)(4)班">中西医临床(全科医学)(4)班</option>-->
<!--          <option value="中西医临床医(1)班">中西医临床医(1)班</option>-->
<!--          <option value="中西医临床医(2)班">中西医临床医(2)班</option>-->
<!--          <option value="中西医临床医(3)班">中西医临床医(3)班</option>-->
<!--          <option value="中西医临床医(4)班">中西医临床医(4)班</option>-->
<!--          <option value="中西医结合(5+3)班">中西医结合(5+3)班</option>-->
<!--          <option value="中西医结合(教改)班">中西医结合(教改)班</option>-->
<!--          <option value="七年制骨伤">七年制骨伤</option>-->
<!--          <option value="七年制中西医结合">七年制中西医结合</option>-->
<!--          <option value="七年制中医学">七年制中医学</option>-->
<!--          <option value="针灸推拿专升本">针灸推拿专升本</option>-->
<!--          <option value="针推涉外">针推涉外</option>-->
<!--          <option value="中西医临床教改班">中西医临床教改班</option>-->
<!--          <option value="中医学(美容康复)">中医学(美容康复)</option>-->
<!--          <option value="级中医学(免费)">中医学(免费)</option>-->
<!--        </select>-->
        <div class="rightsearchdiv">
          <!-- name -->
          <div class="rightsearchdivtext">
            <input type="text" name="jingfangming" class="nobodertext" placeholder="输入方剂名查询" id="keyword1" style="width:150px" onkeyPress="enterKeyPress(event)">
            <input type="text" name="createuser" class="nobodertext" placeholder="输入录入人查询" id="keyword2" style="width:150px;">
            <button class="searchbtn" onclick="search()" style="float:right">
              <img src="/images/fdj.png" alt="" class="searchfdj">
            </button>
          </div>
        </div>
      </div>
      <table class="neirontbiao" id="tbl_list"style="width:100%"></table>
      <div class="button-container">
        <button id="prevButton">上一页</button>
        <button id="nextButton">下一页</button>
      </div>
      每页显示条数：
      <select id="pageSizeSelect" onchange="changePageSize();">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50" selected>50</option>
        <option value="100">100</option>
      </select>
      <div class="pagediv" id="pager">
        <label>第
          <input type="text" id="page" style="width:30px" onkeypress="pageSearch()">
          页
        </label>
        <input type="button" value="跳转" onclick="pageOn()">
        <p id="sumPageId">place</p>
      </div>

    </td>
  </tr>
</table>


</body>
</html>
<script type="text/javascript">
  var searchValue1=document.getElementById('keyword1');
  var searchValue2=document.getElementById('keyword2');
  var changeGrade=document.getElementById('gradeSelect');
  var changeClass=document.getElementById('classSelect');
  //新的
  function start(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/fjgl/', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        dataSource = JSON.parse(xhr.responseText);
        dataSource.forEach(function(obj) {
          for (var key in obj) {
            if (obj.hasOwnProperty(key) && obj[key] === null) {
              obj[key] = ''; // 将属性值为 null 的属性替换为空字符串
            }
          }
        });
        data = JSON.parse(JSON.stringify(dataSource));
        console.log(data);
        renderData();
      }
    };
    xhr.send();
  }
  var pageChage=document.getElementById('page');
  var sumPageShow=document.getElementById('sumPageId');
  var pageSize = 50; // 每页显示的数据量
  var currentPage = 1; // 当前页码
  var dataRender=[];  //每页显示的数据，是数据
  var pageSum=0;  //总共的页数
  var dataSource=[];   //一共有的json数据，源数据
  var data=[];  // 操作的数据，防止错误，可以由源数据赋值
  // 使用AJAX请求获取JSON数据
  start();
  function renderData(){    //渲染页面函数
    pageSum=Math.ceil(data.length/(pageSize));
    dataRender=data.slice((currentPage-1)*pageSize,pageSize*currentPage);
    var container = document.getElementById('tbl_list');
    var html = '<tr class="neirontbiaotou"><td width="13%">方剂名</td><td width="10%">来源</td><td width="10%">医家流派</td><td width="14%">功效</td><td width="14%">主治病症</td><td width="14%">主治症状</td><td width="10%">录入人</td><td width="6%">审核</td><td width="10%"></td></tr>';
    if (dataRender.length == 0) {
      html += '<tr><td colspan="8" style="text-align:center;height:50px;">暂无方剂信息</td></tr>';
    }
    for (var i = 0; i < dataRender.length; i++) {
      var item = dataRender[i];
      html += '<tr>';
      html += '<td>' + item.jingfangming + '</td>';
      html += '<td>' + item.laiyuan + '</td>';
      html += '<td>' + item.liupai + '</td>';
      html += '<td>' + item.gongneng + '</td>';
      html += '<td>' + item.zhuzhi + '</td>';
      html += '<td>' + item.zhuzhizhengzhuang + '</td>';
      html += '<td>' + item.createuser + '</td>';
      html += '<td>' + item.shenhe + '</td>';
      html += '<td>' + '<a _self="_blank" href="javascript:update(\'' + item.id + '\')">编辑</a>&nbsp;<a style=";color:#0c531f" href="javascript:deleteD(\'' + item.id + '\')">删除</a>' + '</td></tr>';
    }
    pageChage.value=currentPage;
    sumPageShow.textContent="共 "+pageSum+" 页";
    container.innerHTML = html;
  }
  function nextOrPreOnClick(){
    //上一页
    var prevButton = document.getElementById('prevButton');
    prevButton.addEventListener('click', function() {
      currentPage--;
      if(currentPage==0)
        currentPage=pageSum;
      renderData();

    });

    // 下一页按钮点击事件处理函数
    var nextButton = document.getElementById('nextButton');
    nextButton.addEventListener('click', function() {
      currentPage=(++currentPage)%pageSum;
      currentPage=currentPage==0?pageSum:currentPage;
      renderData();
    });
  }
  function changePageSize(){
    var pageSizeSelect = document.getElementById('pageSizeSelect');
    pageSize = parseInt(pageSizeSelect.value);
    currentPage=1;
    renderData();
  }
  nextOrPreOnClick();
  function search() {
    currentPage = 1;
    data = [];
    var inputVal1 = searchValue1.value.toUpperCase();
    var inputVal2 = searchValue2.value.toUpperCase();
    if (inputVal1 == ""&&inputVal2=="") {
      data = JSON.parse(JSON.stringify(dataSource));
    }
    else {
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i].jingfangming.toUpperCase().includes(inputVal1)  && dataSource[i].createuser.toUpperCase().includes(inputVal2) ) {
          data.push(dataSource[i]);
        }
      }
    }
    renderData();
  }
  function enterKeyPress(event) {
    // 检查按下的按键是否为回车键，回车键的keyCode是13
    if (event.keyCode === 13) {
      search();
    }
  }
  function create(){
    window.location.href="/fjgl/create";
  }
  function update(userid){

    console.log("编辑");
    // window.location.href = "/fjgl/edit/" + userid;
    window.open ("/fjgl/edit/" + userid);
  }
  function BatchAdd(){
    window.location.href="/fjgl/batchAdd";
  }
  function deleteD(userid){
    var result=confirm("确认删除当前内容吗？");
    if(result){
      // 发送 DELETE 请求
      fetch('/fjgl/'+userid, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json' // 可根据实际情况设置请求头
        },
      })
              .then(response => {
                if (response.ok) {
                  alert("删除成功！");
                  start();
                  renderData();
                } else {
                  alert("发生错误，删除失败！");
                }
              })
              .catch(error => {
                // 捕获网络错误等异常
                alert("网络错误，删除失败！");
              });

    }
  }
  function pageSearch(event) {
    // 检查按下的按键是否为回车键，回车键的keyCode是13
    if (event.keyCode === 13) {
      pageOn();
    }
  }
  function pageOn(){
    var afterPage=pageChage.value;
    if(afterPage<1||afterPage>pageSum){
      alert("输入的页码错误！");
      return;
    }
    currentPage=afterPage;
    renderData();
  }
  function changeGradeFun(){
    var val=changeGrade.value.toUpperCase();
    currentPage = 1;
    data = [];
    if (val== "") {
      data = JSON.parse(JSON.stringify(dataSource));
    }
    else {
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i].createuser.substring(0,4).toUpperCase().includes(val) ) {
          data.push(dataSource[i]);
        }
      }
    }
    document.getElementById('classNone').selected=true;
    renderData();
  }
  function changeClassFun(){
    var val=changeClass.value;
    currentPage = 1;
    data = [];

    if (val== "") {
      data = JSON.parse(JSON.stringify(dataSource));
    }
    else {
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i].company.toUpperCase().includes(val) ) {
          data.push(dataSource[i]);
        }
      }
    }
    document.getElementById('gradeNone').selected=true;
    renderData();
  }
</script>